<template>
    <div style="width: 630px; margin: auto;">
        <h1>实例：商品导航和商品列表组件间的通信</h1>
        <div style="float:left;width: 20%;">
            <!--左侧导航组件-->
            <GoodsNav @handle="handle"></GoodsNav>
        </div>
        <div style="float:left;width: 80%;">
            <!--右侧商品展示组件-->
            <GoodsList :list="list"/>
        </div>
    </div>
</template>
<script>
import GoodsList from '@/components/Sample/GoodsList.vue';
import GoodsNav from '@/components/Sample/GoodsNav.vue';

export default {
    components:{
        GoodsNav,
        GoodsList
    },
    data() {
        //父组件向子组件传递图片路径时,传的是绝对路径,但如果我们直接写绝对路径,那么在传递时,
        //会加上ip和端口号,在页面就无法进行访问,可以通过require解决这个问题
        return {
            goods:[{id:'001',name:'A',cid:'1',src:require('../assets/logo.png')},
            {id:'002',name:'B',cid:'1',src:require('../assets/logo.png')},
            {id:'003',name:'C',cid:'1',src:require('../assets/logo.png')},
            {id:'004',name:'AA',cid:'2',src:require('../assets/logo.png')},
            {id:'005',name:'BB',cid:'2',src:require('../assets/logo.png')},
            {id:'006',name:'CC',cid:'2',src:require('../assets/logo.png')},
            {id:'007',name:'AAA',cid:'3',src:require('../assets/logo.png')},
            {id:'008',name:'BBB',cid:'3',src:require('../assets/logo.png')},
            {id:'009',name:'CCC',cid:'3',src:require('../assets/logo.png')},
            ],
            list:[]//添加list数组,用来接收商品数据
        }
    },
    //通过使用mounted生命周期钩子函数,使得打开页面时,就能够把数据传递过去
    mounted() {
        this.list=this.goods.slice()
    },
    methods: {
        handle(val){
            this.list = this.goods.filter(v => v.cid==val)
        }
    },
}
</script>